<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频检测</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .index {
            background-image: url(image/index.jpeg);
            background-size: cover;
            background-repeat: no-repeat;
            overflow: hidden;
            height: 100%;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }


        .avatar {
            width: 550px;
            height: 300px;
            display: block;
        }
    </style>
</head>
<body class="index">
<div id="myApp">


    <el-card style="position: fixed;left:8%;top:30%;width: 600px">
        <div slot="header">
            <el-button type="primary" >开始检测</el-button>
        </div>
        <div class="text item">
            <el-upload
                    class="avatar-uploader"
                    action
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
            >
                <video autoplay muted class="avatar" :src="imageUrl"></video>
            </el-upload>
        </div>

    </el-card>

    <el-card style="position: fixed;left:53%;top:30%;width: 600px">
        <div slot="header">
            <el-button type="primary" round>检测结果</el-button>
        </div>
        <div class="text item">

            <div style="border: 1px solid bisque">
                <video autoplay muted class="avatar" :src="resultUrl"></video>
            </div>
        </div>
    </el-card>


</div>

</body>
<script>
    new Vue({
        el: "#myApp",//绑定元素
        data: {
            imageUrl: '',
            resultUrl: "",
            file_raw: "",
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.file_raw = file.raw;
            },
      


        }

    })
</script>

</html>